<template>
  <div class="mail-list-page">
    <div class="mail-list-page-toolbar toolbar-2col">
      <div class="left-wrap">
        <div class="xmail-ui-checkbox ui-checkbox-disabled select-all">
          <div class="ui-checkbox-icon-uncheck"></div>
        </div>

        <div class="toolbar-title">
          <span class="toolbar-folder-name">垃圾箱</span>
          <div class="mail-list-page-filter-btn">
            <div class="filter-btn-inner">
              <span
                class="xmail-ui-icon btn-icon"
                style="width: 16px; height: 20px"
              >
                <span>^</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="xmail-ui-ellipsis-toolbar">
          <div class="ui-ellipsis-toolbar-btns">
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
              @click="deleteForever"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i>🚮</i>
              </span>
              <div class="ui-btn-text">彻底删除</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mail-list-page-items">
      <div class="mail-list-page-items-inner">
        <div class="xmail-ui-float-scroll">
          <div class="ui-float-scroll-body" tabindex="0">
            <div
              v-for="email in trashEmails"
              :key="email.id"
              class="mail-list-page-item mail-list-item-compact mail-list-page-wide-item"
            >
              <div class="not-shrink wide-mode-left-wrap">
                <div
                  class="xmail-ui-checkbox mail-checkbox"
                  :class="{ 'is-checked': email.isChecked }"
                  @click="toggleEmailSelection(email)"
                >
                  <div class="ui-checkbox-icon-uncheck"></div>
                </div>
                <div class="mail-sender mail-unread">
                  <div class="mail-list-page-mail-icon">
                    <span
                      class="xmail-ui-icon"
                      style="width: 20px; height: 20px"
                      >✉</span
                    >
                  </div>
                  <div class="senders-list">
                    <div class="xmail-cmp-account cmp-account-style-none">
                      <div class="cmp-account-wrap">
                        <div class="cmp-account-inner">
                          <span class="cmp-account-nick">{{
                            email.sender_name
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mail-text">
                <span class="mail-subject mail-unread">
                  {{ email.subject }}
                </span>
                <span class="mail-digest">{{ email.content }}</span>
              </div>
              <div class="not-shrink"></div>
              <div class="not-shrink"></div>
              <div class="not-shrink">
                <div class="mail-time mail-unread">{{ email.send_at }}</div>
                <div
                  class="xmail-ui-btn ui-btn-size24 ui-btn-them-clear-gray ui-btn-only-icon"
                >
                  <span
                    class="xmail-ui-icon ui-btn-icon"
                    style="
                      width: 20px;
                      height: 20px;
                      color: var(--base_gray_050);
                    "
                  >
                    {{ email.is_starred ? "★" : "☆" }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import axios from "axios";

// 定义邮件数据结构
interface Email {
  id: number;
  sender_id: number;
  recipient_id: number;
  subject: string;
  content: string;
  is_read: boolean;
  send_at: string;
  user_nick: string;
  sender_name: string;
  is_starred: boolean;
  isChecked: boolean;
  isDeleted: boolean;
  trashbin: boolean; // 新增字段
}

export default defineComponent({
  setup() {
    const trashEmails = ref<Email[]>([]);
    const selectedEmails = ref<Email[]>([]);

    const fetchTrashEmails = async () => {
      try {
        const userInfoStr = localStorage.getItem("userInfo");
        if (userInfoStr) {
          const userInfo = JSON.parse(userInfoStr);
          const phone_number = userInfo.phone_number;
          const response = await axios.get(
            `http://localhost:3000/api/get-deleted-emails/${phone_number}`
          );
          trashEmails.value = response.data.emails.map((email: Email) => ({
            ...email,
            isChecked: false,
          }));
        }
      } catch (error) {
        console.error("获取垃圾箱邮件失败", error);
      }
    };

    const toggleEmailSelection = (email: Email) => {
      email.isChecked = !email.isChecked;
      if (email.isChecked) {
        selectedEmails.value.push(email);
      } else {
        const index = selectedEmails.value.findIndex((e) => e.id === email.id);
        if (index !== -1) {
          selectedEmails.value.splice(index, 1);
        }
      }
    };

    const deleteForever = async () => {
      const emailIds = selectedEmails.value.map((email) => email.id);
      try {
        await axios.post("http://localhost:3000/api/delete-forever", {
          emailIds,
        });
        fetchTrashEmails();
        selectedEmails.value = [];
      } catch (error) {
        console.error("彻底删除邮件失败", error);
      }
    };

    onMounted(() => {
      fetchTrashEmails();
    });

    return {
      trashEmails,
      selectedEmails,
      fetchTrashEmails,
      toggleEmailSelection,
      deleteForever,
    };
  },
});
</script>

<style scoped>
.mail-list-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mail-list-page-toolbar {
  flex-shrink: 0;
  display: flex;
  height: 48px;
}

.mail-list-page-toolbar .left-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-right: 12px;
  box-sizing: border-box;
}

.mail-list-page-toolbar.toolbar-2col .left-wrap {
  width: 274px;
}

.xmail-ui-checkbox.ui-checkbox-disabled {
  opacity: 0.3;
  --uncheck-bg: var(--base_gray_010);
  --uncheck-border: var(--base_gray_050);
}

.mail-list-page-toolbar .select-all {
  height: 100%;
  width: 44px;
  padding-left: 18px;
  box-sizing: border-box;
}

.xmail-ui-checkbox {
  --uncheck-bg: transparent;
  --uncheck-border: var(--base_gray_040);
  --checked-color: var(--theme_primary);
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.xmail-ui-checkbox .ui-checkbox-icon-uncheck {
  width: 16px;
  height: 16px;
  border: 1px solid var(--uncheck-border);
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--uncheck-bg);
}

.mail-list-page-toolbar .toolbar-title {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-toolbar .toolbar-folder-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--base_gray_100);
}

.mail-list-page-filter-btn {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --text-color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--bg);
  margin-left: 6px;
}

.mail-list-page-filter-btn .filter-btn-inner {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-list-page-filter-btn .btn-icon {
  color: var(--icon-color);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-list-page-toolbar .right-wrap {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding-right: 16px;
  box-sizing: border-box;
}

.xmail-ui-ellipsis-toolbar {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-btns {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-more {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.mail-list-page .mail-list-page-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  min-height: 1000px;
}

.mail-list-page-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 354px;
}

.mail-list-page-tips {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 24px;
}

.mail-list-page-tips .empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--base_gray_080);
}

.mail-list-page-items-inner {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.mail-list-page-wide-item.mail-list-item-compact {
  --border-radius: 4px;
  height: 40px;
  padding-right: 14px;
}

.mail-list-page-wide-item {
  display: flex;
  align-items: center;
  height: 40px;
}

.mail-list-page-item {
  --bg: transparent;
  --hover-bg: var(--base_gray_005);
  --active-bg: var(--base_gray_010);
  --border-color: transparent;
  --border-radius: 6px;
  position: relative;
  cursor: pointer;
  padding-right: 11px;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  box-sizing: border-box;
  background: var(--bg);
  margin: 0 4px;
}

.mail-list-page-wide-item .wide-mode-left-wrap {
  width: 268px;
  padding-right: 4px;
  box-sizing: border-box;
}

.mail-list-page-item .not-shrink {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.mail-list-page-item * {
  line-height: 20px !important;
}

.mail-list-page-item .mail-checkbox {
  flex-shrink: 0;
  position: relative;
  height: 100%;
  width: 44px;
  padding-left: 12px;
  box-sizing: border-box;
}

.mail-list-page-item .mail-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  flex-shrink: 99999;
  color: var(--base_gray_050);
  min-width: 32px;
  box-sizing: border-box;
}

.mail-list-page-item .mail-checkbox::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.mail-list-item-compact .mail-sender {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 18px;
}

.mail-list-page-item .mail-sender {
  --sender-height: 28px;
  --skeleton-height: 14px;
  font-size: 14px;
  line-height: 20px;
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  color: var(--base_black);
  overflow: hidden;
  padding-right: 8px;
  box-sizing: border-box;
}

.mail-list-item-compact .mail-subject {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 18px;
}

.mail-list-page-item .mail-subject {
  --skeleton-height: 13px;
  font-size: 13px;
  line-height: 20px;
  color: var(--base_black);
  box-sizing: border-box;
}

.mail-list-page-item .xmail-ui-checkbox.is-checked .ui-checkbox-icon-uncheck {
  border-color: black;
  background-color: yellow;
}
</style>
